<template>
  <view class="exchange-container">
    <!-- 积分显示
			积分明细
		 -->
    <view class="credits">
      <view class="num">
        我有
        <span>{{ getCreditAmounts }}</span>
        积分
      </view>
      <view class="details">
        <button @click="ToShowCreditsInfo">明细</button>
      </view>
      <view class="bg-box"></view>
    </view>
    <!-- 兑换商品显示 -->
    <view class="list">
      <!-- 传入兑换商品的信息 -->
      <exchangeItem v-for="item in goodsList" :good="item" :key="item.id" @toExchange="toExchange"></exchangeItem>
    </view>
    <!-- 提示窗示例   显示兑换内容 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog type="info" cancelText="再考虑考虑" confirmText="确认兑换" title="以下为您兑换的商品信息:" @confirm="dialogConfirm"
        @close="dialogClose">
        <template>
          <p>{{ getExchangeTips }}</p>
        </template>
      </uni-popup-dialog>
    </uni-popup>

    <!-- 提示信息弹窗 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="msgType" :message="tips" :duration="2000"></uni-popup-message>
    </uni-popup>
    <!-- 普通弹窗  显示明细内容 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <view class="details-content">
          <CreditsDetails :list="detailsList ? detailsList : []"></CreditsDetails>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import exchangeItem from '../components/exchangeItem';
import CreditsDetails from '../components/creditsDetails.vue';
import { mapActions, mapState, mapGetters } from 'vuex';
import { getGoodsListAsync, exchangeGoodsAsync } from '@/api/credits'
export default {
  data () {
    return {

      goodsList: [],
      // 失败成功弹窗
      msgType: '',
      tips: '',
      // 兑换商品的id
      goodsId: ''
    };
  },
  components: {
    exchangeItem,
    CreditsDetails
  },
  onLoad () {
    // 页面加载 获取接口数据
    this.getCreditsList(this.token);
    this.getGoodsList()
  },
  methods: {
    // vuex 中异步方法 请求接口数据获取【明细列表】
    ...mapActions('credits', ['getCreditsList']),
    // 打开明细弹窗
    ToShowCreditsInfo () {
      this.$refs.popup.open('left');
    },
    // 打开兑换弹窗
    async toExchange (id) {
      this.goodsId = id
      this.$refs.alertDialog.open()
    },
    // 需要在这个进行提交接口数据
    async dialogConfirm () {
      // 获取id的商品信息
      const goods = this.goodsList?.filter(item => item.id === this.goodsId)[0]
      //判断积分是否足够。不够则直接关弹窗，
      if (this.getCreditAmounts < goods?.price) {
        this.dialogClose();
        this.messageToggle('error', '积分不够兑换商品！');
        return false;
      }
      // 积分足够则进行兑换
      // 提交数据到后台，添加兑换信息到明细中
      try {
        const res = await exchangeGoodsAsync(this.token, this.goodsId)
        if (res.data?.success) {
          this.getCreditsList(this.token);
          return this.messageToggle('success', '成功兑换商品!可在[明细]中查看记录!');
        } else {
          return this.messageToggle('warning', '兑换失败')
        }
      } catch (error) {
        console.log('%c [exchange-dialogConfirm  ]-91', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
      // 提示兑换成功
    },
    dialogClose () {
      this.$refs.alertDialog.close();
      this.goodsId = ''
    },
    messageToggle (type, msg) {
      this.msgType = type;
      this.tips = msg;
      this.$refs.message.open();
    },
    // 获取商品列表
    async getGoodsList () {
      try {
        const res = await getGoodsListAsync()

        console.log('%c [  ]-108', 'font-size:13px; background:pink; color:#bf2c9f;', res)
        this.goodsList = res.data?.data || []
      } catch (error) {

        console.log('%c [  ]-111', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    }
  },
  computed: {
    // vuex 中获取明细列表
    ...mapState('credits', ['detailsList']),
    ...mapState('user', ['token']),
    ...mapGetters('credits', ['getCreditAmounts']),

    // 弹窗中显示兑换商品的大致信息   传入商品id为参数
    getExchangeTips () {
      const goods = this.goodsList?.filter(item => item?.id === this.goodsId)[0]
      return `你所兑换的商品为【${goods?.name}】,需要积分【${goods?.price}】分，您确定需要兑换嘛？`;
    },

  }
};
</script>

<style lang="scss" scoped>
.exchange-container {
  .credits {
    position: relative;
    box-sizing: border-box;
    padding: 40rpx 0;
    // background: linear-gradient(#45a7fe, #55d4ff);
    background-color: #55d4ff;
    height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30rpx;
    color: #fff;

    .num {
      z-index: 5;
      font-size: 32rpx;

      span {
        font-weight: 700;
        font-size: 2em;
        padding: 0 20rpx;
      }
    }

    .details {
      z-index: 5;

      button {
        font-size: 26rpx;
        height: 60rpx;
        color: #fff;
        width: 200rpx;
        border: 1rpx solid #fff;
        border-radius: 30rpx;
        background-color: transparent;
      }
    }

    $color: #f5f5f5;
    $width: 50%;
    $bottom: -14%;

    &::after {
      z-index: 2;
      content: '';
      position: absolute;
      bottom: $bottom;
      left: 0;
      height: 30%;
      width: $width;
      background-color: $color;
      border-radius: 0 100% 0 0;
    }

    &::before {
      z-index: 2;
      content: '';
      position: absolute;
      bottom: $bottom;
      right: 0;
      height: 30%;
      width: $width;
      background-color: $color;
      border-radius: 100% 0 0 0;
    }

    $size: 250rpx;

    .bg-box {
      z-index: 3;
      position: absolute;
      bottom: -3%;
      left: 50%;
      width: $size;
      height: $size;
      background: #55d4ff;
      border-radius: 70%;
      transform: translateX(-50%);
    }
  }

  .list {
    margin: 0 auto;
    margin-top: 50rpx;
    width: 90vw;
    box-sizing: border-box;
  }

  .popup-content {
    width: 80vw;
    height: 100vh;
    overflow-y: scroll;
  }
}
</style>
